<template>
  <div class="main">
    <div class="search">
      <el-input clearable v-model="postForm.name" placeholder="输入关键字搜索" prefix-icon="el-icon-search">
        <template slot="append">
          <el-button type="primary" icon="el-icon-search" @click="getPostList(postForm)">搜索</el-button>
        </template>
      </el-input>
    </div>
    <el-row>
      <el-col :span="4" class="post-category"
        ><el-tree
          :data="postCategoryTree"
          :props="{
            children: 'children',
            label: 'name',
          }"
          highlight-current
          default-expand-all
          empty-text="无分类"
          node-key="id"
          show-checkbox
          ref="postTree"
          @check="getCurrentNode"
          :filter-node-method="filterNode">
        </el-tree
      ></el-col>
      <el-col :span="20">
        <div class="post-list">
          <el-card v-for="item in postList" :key="item.id" class="post-card">
            <div slot="header">
              <h3>{{ item.name }}</h3>
              <div>
                {{ JSON.parse(item.address)[0] }}|{{ typeMap[item.type] }}|{{ educationMap[item.education] }}|{{ item.minSalary }}-{{
                  item.maxSalary
                }}元
                <el-button type="text" class="info" @click="openDetail(item)">详情</el-button>
              </div>
            </div>
            <div>
              <div>{{ getDescription(item.duty) }}</div>
            </div>
          </el-card>
        </div>
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="postTotal"
          :current-page.sync="postForm.current"
          @size-change="changePageSize"
          hide-on-single-page
          @current-change="changeCurrentPage"
          :page-sizes="[10, 15, 20, 25, 30, 50, 80, 100]">
        </el-pagination>
      </el-col>
    </el-row>
    <el-dialog class="post-detail" :modal="false" title="岗位详情" width="80%" :visible.sync="dialogFormVisible" center>
      <h1>{{ currentPost.name }}</h1>
      <p>
        <i class="el-icon-location-information"></i>{{ JSON.parse(currentPost.address)[0] }}|<i class="el-icon-price-tag"></i
        >{{ typeMap[currentPost.type] }}|<i class="el-icon-data-board"></i>{{ groupMap[currentPost.group] }}|<i class="el-icon-reading"></i
        >{{ educationMap[currentPost.education] }}| <i class="el-icon-coin"></i>{{ currentPost.minSalary }}-{{ currentPost.maxSalary }}元|<i
          class="el-icon-shopping-bag-1"></i
        >{{ currentPost.minWork }}-{{ currentPost.maxWork }}年
      </p>
      <el-divider></el-divider>
      <p><i class="el-icon-postcard"></i>岗位职责：</p>
      <p class="post-detail-text">{{ currentPost.duty }}</p>
      <el-divider></el-divider>
      <p><i class="el-icon-coffee-cup"></i>岗位要求：</p>
      <p class="post-detail-text">{{ currentPost.requirement }}</p>
      <!-- 表单尾部 -->
      <div slot="footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="selectResume">投递岗位</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogFormPostVisible" title="请选择你的简历" class="resume-list" :modal="false">
      <el-table :data="resumeList" height="400">
        <el-table-column width="220" v-for="item in tableList" :label="item.label" :prop="item.name" :key="item.name"></el-table-column>
        <el-table-column width="120" label="操作" fixed="right">
          <template slot-scope="scope"
            ><el-button type="text" @click="sendResume(scope.row)">投递</el-button
            ><el-button type="text" @click="viewResume(scope.row)">查看</el-button></template
          >
        </el-table-column>
      </el-table>
      <el-pagination
        small
        hide-on-single-page
        :current-page.sync="resumeForm.current"
        @size-change="changeResumePageSize"
        @current-change="changeResumeCurrentPage"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 15, 20, 25, 30, 50, 80, 100]"
        :total="resumeTotal">
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['id']),
  },
  data() {
    return {
      dialogFormPostVisible: false,
      // 简历表单
      tableList: [
        // {
        //   label: 'ID',
        //   name: 'id',
        // },
        {
          label: '简历名称',
          name: 'name',
        },
        {
          label: '创建时间',
          name: 'createTime',
        },
      ],
      //分类树
      postCategoryTree: [],
      // 简历列表
      resumeList: [],
      // 岗位表单
      postForm: {
        name: '',
        current: 1,
        size: 10,
      },
      // 简历表单
      resumeForm: {
        current: 1,
        size: 10,
      },
      // 岗位列表
      postList: [],
      // 岗位总数
      postTotal: 0,
      // 简历总数
      resumeTotal: 0,
      // 岗位类型
      typeMap: {
        0: '全职',
        1: '兼职',
        2: '实习',
      },
      // 学历
      educationMap: {
        0: '不限',
        1: '大专及以上',
        2: '本科及以上',
        3: '研究生及以上',
      },
      //面向群体
      groupMap: {
        0: '社会招聘',
        1: '校园招聘',
      },
      // 详情对话框
      dialogFormVisible: false,
      // 当前岗位
      currentPost: {
        name: '',
        address: '[]',
        type: '',
        education: '',
        minSalary: '',
        maxSalary: '',
        duty: [],
        requirement: [],
      },
    }
  },
  created() {
    this.getPostCategoryTree()
    this.getPostList(this.postForm)
  },
  methods: {
    // 获取岗位列表
    getPostList(data) {
      this.$store.dispatch('post/lookPost', data).then((response) => {
        this.postList = response.data
        this.postTotal = parseInt(response.other.pageSize)
      })
    },
    //获取选中节点
    getCurrentNode() {
      var node = this.$refs.postTree.getCheckedNodes(true)
      var ids = node.map((v) => v.id)
      this.postForm.postCategoryIds = ids
      this.getPostList(this.postForm)
    },
    // 获取分类树
    getPostCategoryTree() {
      this.$store.dispatch('postCategory/lookPostCategoryTree').then((response) => {
        this.postCategoryTree = response.data
      })
    },
    //查看简历
    viewResume(item) {
      this.$router.push({
        path: '/resume',
        query: {
          id: item.id,
        },
      })
    },
    //投递简历
    sendResume(resume) {
      this.$store.dispatch('resume/submitResume', { postId: this.currentPost.id, resumeId: resume.id }).then((response) => {
        if (response.success) {
          this.$message({
            type: 'success',
            message: '简历投递成功!',
            showClose: true,
          })
        } else if (response.code == 511) {
          this.$message({
            type: 'warning',
            message: '简历已投递过!',
            showClose: true,
          })
        }
      })
    },
    lookResumeListForUser() {
      this.$store
        .dispatch('resume/lookResumeListForUser', { userId: this.id, current: this.resumeForm.current, size: this.resumeForm.size })
        .then((response) => {
          this.resumeList = response.data
          this.resumeTotal = parseInt(response.other.pageSize)
        })
    },
    //选择简历
    selectResume() {
      this.lookResumeListForUser()
      this.dialogFormPostVisible = true
    },
    // 打开详情对话框
    openDetail(item) {
      this.dialogFormVisible = true
      this.currentPost = item
    },
    // 过滤树
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    // 截取岗位描述
    getDescription(v) {
      return v != undefined && v.length > 30 ? v.substring(0, 30) + '...' : v
    },
    //  更改当前显示页码
    changeCurrentPage(val) {
      this.postForm.current = val
      this.getPostList(this.postForm)
    },
    //  更改每页大小
    changePageSize(val) {
      this.postForm.size = val
      this.getPostList(this.postForm)
    },
    //  更改当前显示页码
    changeResumeCurrentPage(val) {
      this.resumeForm.current = val
      this.lookResumeListForUser()
    },
    //  更改每页大小
    changeResumePageSize(val) {
      this.resumeForm.size = val
      this.lookResumeListForUser()
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep.main {
  // color: white;
  margin-top: 70px;
  height: 40rem;
  .search {
    margin-bottom: 1%;
    margin-top: 1%;
    width: 60%;
    margin-left: 20%;
  }
  .post-detail {
    position: fixed;
    .post-detail-text {
      white-space: pre-line;
    }
  }
  .post-category {
    height: 36.5rem;
  }
  .post-list {
    height: 34.6rem;
  }
  .el-pagination {
    float: right;
  }
  .post-category,
  .post-list {
    overflow: scroll;
    .post-card {
      margin-bottom: 1%;
      width: 90%;
      margin-left: 5%;
      .info {
        float: right;
      }
    }
  }
}
</style>
